<template>
  <div>
    <div class="detailTitle">
      <span class="title">{{detailData.sysName}}</span>
      <el-tag size="small" round v-show="detailData.sysCategoryName == '' || detailData.sysCategoryName == null  ? false:true">{{detailData.sysCategoryName}}</el-tag>
    </div>
    <el-form  :model="detailData.contentList" :class="isEdit ? 'el-form' : 'el-form-edit' " label-width="auto" >
      <el-form-item v-if="props.detailEdit">
        <el-button v-show="!isEdit" class="edit" @click="onEdit">编辑</el-button>
        <el-button v-show="isEdit" class="edit" @click="onSave(detailData.contentList)">保存</el-button>
        <el-button v-show="isEdit" class="edit" @click="onReset()">取消</el-button>
      </el-form-item>
      <el-form-item v-if="props.detailData.comEntityAttr == null" label="起点名称" >
        <el-input class="el-form-edit" autosize :readonly="true" :placeholder="props.detailData.srcName"
        />
      </el-form-item>
      <el-form-item v-if="props.detailData.comEntityAttr == null" label="终点名称" >
        <el-input class="el-form-edit" autosize :readonly="true" :placeholder="props.detailData.dstName"
        />
      </el-form-item>
      <el-form-item v-if="props.detailData.comEntityAttr != null" label="知识分类" >
        <template v-if="isEdit">
          <el-tree-select
            node-key="id"
            v-model="props.detailData.comEntityAttr.sysCategoryId"
            :cache-data="cacheData"
            :props="treeProps1"
            :load="loadNode1"
            lazy
            :expand-on-click-node="false"
            :check-strictly="true"
            :readonly="isEdit ? false : true"
          />
        </template>
        <template v-else>
          <el-input  v-model="props.detailData.comEntityAttr.sysCategoryName"
                     autosize
                     :readonly="isEdit ? false : true"/>
        </template>
      </el-form-item>

      <template v-for="(item, index) in detailData.contentList" :key="index" >
        <el-form-item  :label="item.name != null ? item.name : item.code" prop="value">
          <el-date-picker
            v-if="item.dataType == 'date'"
            v-model="item.value"
            type="date"
            :default-time="item.value"
            value-format="YYYY-MM-DD"
            :readonly="isEdit ? false : true"
          />
          <el-date-picker
            v-else-if="item.dataType == 'datetime'"
            v-model="item.value"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            :readonly="isEdit ? false : true"
          />
          <el-date-picker
            v-else-if="item.dataType == 'timestamp'"
            v-model="item.value"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :readonly="isEdit ? false : true"
          />
          <el-time-picker
            v-else-if="item.dataType == 'time'"
            v-model="item.value"
            arrow-control
            value-format="HH:mm:ss"
            :readonly="isEdit ? false : true"
          />

          <el-input  v-else v-model="item.value"
                     autosize
                     :readonly="isEdit ? false : true"
                     :type="item.value.length > 30 ? 'textarea' : 'text' "
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup lang="ts">
 import Node from "element-plus/es/components/tree/src/model/node";
 import {ref} from "vue";
 import {getTree} from "@/api/buildKg/classified";
 interface Tree {
   id: number;
   name: string;
   parentId?: string | number;
   children?: Tree[];
   isLeaf?: boolean;
 }
 const treeProps1 = reactive({
   label: "name",
   // children: "itemList",
   isLeaf: "isLeaf",
 });


 /** 加载树 */
 const loadNode1 = (node: Node, resolve: (data: Tree[]) => void) => {
   let params = {
     id: node.level === 0 ? "" : node.data.id,
   };

   getTree(params).then((res) => {
     resolve(res.data.itemList);
   });
 };
 export interface IDetailData {
   vid:string;
   sysName:string;
   sysCategoryName:string;
   contentList:Array<any>;
   comEntityAttr:any;
   srcName:string;
   dstName:string;
 }
  const props = defineProps({
    detailEdit:{
      type:Boolean,
      default:() => true
    },
    detailData: {
      type:Object as PropType<IDetailData>,
      default:() => {}
    },
    detailParams:{
      type:Object,
      default:() => {}
    }
  })
 let detailDataInit = reactive({})
 let cacheData = reactive([])
watch(props.detailData, (value, oldValue, onCleanup) => {
  detailDataInit = JSON.stringify(value)
  if (props.detailData.comEntityAttr != null) {
    cacheData = [{
      id: props.detailData.comEntityAttr.sysCategoryId,
      name:props.detailData.comEntityAttr.sysCategoryName
    }]
  }
})
  const emit = defineEmits(['on-save','on-cancel'])
  // 是否是编辑状态
  const isEdit = ref(false)
  const onEdit = () => {
    isEdit.value = true
  }
  const onSave = (form) => {
    emit('on-save', {
      comAttrId:props.detailData.comEntityAttr.sysCategoryId,
      formData:form,
      vid:props.detailData.vid,
      detailParams:props.detailParams
    })
  }
  const saveEdit = () => {
    isEdit.value = false

  }
  const onReset = () => {
    emit('on-cancel',{
      detailParams:props.detailParams
    })
  }
  defineExpose({
    saveEdit
  })
</script>

<style scoped lang="scss">
.detailTitle {
  margin: 24px;
  border-bottom: solid #EDEFF4 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-weight: bold;
    color: #2B1DFF;
    line-height: 50px;
    font-size: 18px;
  }
  .title::before {
    content:"|";
    width: 3px;
    height: 16px;
    color: #2B1DFF;
    margin-right: 8px;
  }
  .el-tag {
    color:  #2B1DFF;
    font-size: 12px;
    font-weight: 400;
    right: 0px;
  }
}
.edit{
  font-size:12px;
  margin-bottom: 26px;
}
.edit:hover  {
  background-color:  #2B1DFF;
  color:white;
}
.edit:focus {
  background-color:  #2B1DFF;
  color:white;
}
.el-form {
  height: 600px;
  overflow: scroll;
  padding:  0 24px 24px 24px;
  :deep(.el-form-item__label) {
    border: 0;
    color:#7F8A9B;
    font-size: 14px;
    font-weight: 400;
  }
}
.el-form::-webkit-scrollbar {
  display: none;
}
.el-form-edit {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0 ;
  }
  :deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0 ;
  }
}
</style>
